{% load i18n %}
{% load humanize static %}
{% load thumbnail %}
{% load urlize_target_blank %}


{% for reply in thread %}
  <li class="card" news-id="{{ reply.uuid_id }}">
    <div class="card-body">
      <div class="profile-picture">
        {% thumbnail reply.user.picture "x60" as im %}
          <img src="{{ im.url }}" class="pull-left" style="border-radius: 50%;" alt="{% trans 'User Image' %}" class="user-image">
        {% empty %}
          <img src="{% static 'img/user.png' %}" class="pull-left" height="60px" alt="{% trans 'No Profile Picture' %}" />
        {% endthumbnail %}
      </div>
      <div class="post">
        {% if reply.user == request.user %}
          <a href="{% url 'news:delete_news' reply.pk %}">
            <i class="fa fa-times pull-right" aria-hidden="true" title="{% trans 'Click to remove this news' %}"></i>
          </a>
        {% endif %}
        <p>
          <strong>
            <a href="{% url 'users:detail' reply.user.username  %}">{{ reply.user.get_profile_name|title }}</a>
          </strong>
        </p>
        <p>{{ reply|urlize|urlize_target_blank }}</p>
        {% if reply.meta_url %}
          <a href="{{ reply.meta_url }}" target="_blank" class="card meta">
            {% if reply.meta_image %}
              <div class="card-img-top" style="background-image: url({{ reply.meta_image }})"></div>
            {% endif %}
            <div class="card-body">
              {% if reply.meta_title %}
                <h5 class="card-title">{{ reply.meta_title }}</h5>
              {% endif %}
              {% if reply.meta_description %}
                <p class="card-text">{{ reply.meta_description }}</p>
              {% endif %}
              {% if reply.meta_url %}
                <p class="card-btn">{{ reply.meta_url }}</p>
              {% endif %}
            </div>
          </a>
        {% endif %}
        <div class="interaction" id="interaction">
          <a href="#" class="like" title="{% for i in news.get_likers %}{{ i }}&#10;{% endfor %}">
            {% if request.user in news.get_likers %}
              <i class="heart fa fa-heart" aria-hidden="true"></i>
            {% else %}
              <i class="heart fa fa-heart-o" aria-hidden="true"></i>
            {% endif %}
            <span class="like-count">{{ news.count_likers }}</span>
          </a>
          <span class="timestamp">{{ reply.timestamp|naturaltime }}</span>
        </div>
      </div>
    </div>
  </li>
{% endfor %}
